<template>
	<div class="outer">
		<div class="paper">
			<div class="face">
				<img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
			</div>
			<div class="content">
				<h4 class="name">{{ username }}</h4>
				<span class="role">{{ role }}</span>
				<div class="profile">
					<p>Having sat as a magistrate for some years I was faced regularly with the moral dilemma of sentencing those very women and single mothers he talks about, invariably first on the list in our court.</p>
				</div>
				<div class="profile-btn">
					<el-button round class="btn">FOLLOW</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
  export default {
    name: 'UserCard',
		props: {
      username: {
        type: String,
				default: 'YangJinXin'
			},
      role: {
        type: String,
        default: 'YJX'
      }
		}
  }
</script>

<style scoped>
	.btn {
		background-color: #4daf50;
		color: #fff;
	}
	.outer {
		margin-top: 70px;
		display: flex;
		width: 100%;
	}
	.paper {
		border-radius: 3px;
		margin: auto;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
	}
	.face {
		margin: -50px auto 0;
		box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
		border-radius: 50%;
		max-width: 130px;
		max-height: 130px;
		overflow: hidden;
	}
	.content {
		padding: 15px 20px;
		text-align: center;
	}
	.name {
		text-align: center;
		font-size: 18px;
		color: rgba(0, 0, 0, .87);
		font-family: Roboto-Thin;
		margin: 15px;
	}
	.profile {
		margin-top: 15px;
		line-height: 25px;
		text-align: center;
		font-size: 14px;
		color: rgba(0, 0, 0, 0.54);
	}
	.profile-btn {
		margin-top: 15px;
		text-align: center;
	}
	img {
		width: 100%;
		height: auto;
	}
	.role {
		font-size: 14px;
		color: #999988;
		font-family: Roboto-Thin;
	}
</style>